<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 101px;
            height: 101px;
        }
        .current {
            background-color: yellow;
        }
    </style>
    <script src="./jquery.min.js"></script>
</head>
<body>
    <div></div>
    <ul>
        <li>1</li>
        <li class="ee">2</li>
        <li>3</li>
    </ul>
    <script>
        $(function() {
            // 单个事件绑定
            // $("div").click(function() {
            //     $(this).css("backgroundColor", "skyblue");
            // });
            // $("div").mouseover(function() {
            //     $(this).css("backgroundColor", "red");
            // })
            // 事件处理on()
            // $("div").on({
            //     click: function(){
            //         $(this).css("backgroundColor", "skyblue");
            //     },
            //     mouseover: function() {
            //         $(this).css("backgroundColor", "red");
            //     }
            // });
            // 多个事件做同一处理时
            // $("div").on("mouseover mouseout", function() {
            //     $(this).toggleClass("current");
            // });

            // 实现事件委托
            // 给ul绑定事件，但是点击li才会触发，会发生冒泡。li一定是ul的孩子
            // $("ul").on("click", ".ee", function(){
            //     alert(222);
            // })

            // 实现动态绑定
            // 如果不用on，比如当我们先ul下的li元素绑定事件，然后在ul里新加li标签就不会被添加事件，因为是后创建的
            // 但是用了on，就不会出现上面的情况
            
            // 事件解绑off()
            // $("div").on({
            //     click: function(){
            //         $(this).css("backgroundColor", "skyblue");
            //     },
            //     mouseover: function() {
            //         $(this).css("backgroundColor", "red");
            //     }
            // });
            // // 全部解绑
            // // $("div").off();
            // // 解绑点击
            // $("div").off("click");

            $("div").on("click", function() {
                alert(11);
            });
            // 自动触发
            // 1.
            // $("div").click();
            // 2. 
            $("div").trigger("click");
            // 下面的不会触发元素的默认行为
            $("div").triggerHandler("click");

        })
    </script>
</body>
</html>